<template>
  <div v-loading="loading">
    <GoBack></GoBack>
    <ARow class="enter-x">
      <ACol :span="24">
        <Card class="card-brief">
          <div :class="`${prefixCls}-header`">
            <div class="info">
              <div :class="`${prefixCls}-header-img`">
                <img :src="extIdp.logo" width="50px" height="50px"/>
              </div>
              <Description style="width: 100%" @register="registerDescription" />
            </div>
            <div>
              <a-button type="primary" danger class="mr-3 mb-2" @click="handleDeleteExtIdp">删除身份源</a-button>
            </div>
          </div>
        </Card>
      </ACol>

      <ACol :span="24">
        <div class="mt-2" >
          <BasicTable @register="registerTable">
            <template #name="{ record }">
              <a-button type="link" @click="handleEdit(record)">{{ record.name }}</a-button>
            </template>
            <template #action="{ record }">
              <TableAction :actions="getActions(record)" />
            </template>
          </BasicTable>
        </div>
      </ACol>
    </ARow>
  </div>
</template>
<script lang="ts" setup>
  import { ref, useAttrs, onMounted, nextTick } from "vue"
  import MyAlert from "/@/components/My/MyAlert.vue"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { BasicTable, TableAction } from "/@/components/Table"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { useGlobSetting } from "/@/hooks/setting"
  import { columns, idpDescSchema } from "./data"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { useMessage } from "/@/hooks/web/useMessage"
  import * as extIdpApi from "/@/api/iam/extIdp"
  import GoBack from '/@/components/GoBack'
  import { useRoute, useRouter } from "vue-router"
  import { Card, Col, Row } from "ant-design-vue"
  import { Description, DescItem, useDescription } from "/@/components/Description/index"
  import { useGo } from "/@/hooks/web/usePage"

  const router = useRouter()
  let idpId = router.currentRoute.value.params?.idpId
  const ACol = Col
  const ARow = Row
  const emit = defineEmits(["success", "register"])
  const attrs = useAttrs()
  const extIdp = ref({})
  const ldpId = ref("")
  const width = ref<number | string>("800px")
  const { prefixCls } = useDesign("ext-idp-connect")
  const loading = ref(false)
  const go = useGo()
  const connectCountList = ref<any[]>([])
  const [registerDescription] = useDescription({
    bordered: false,
    data: extIdp,
    schema: idpDescSchema,
  })

  const { tableContext } = useListPage({
    designScope: "idp-connect",
    tableProps: {
      api: async (params) => {
        const data = await extIdpApi.getIdpTmpl(params)
        if (data?.connectTmpls) {
          data?.connectTmpls.forEach(item => {
            const count = connectCountList.value.find(e => e.tmplId === item.id)?.count || 0
            item.count = count
          })
        }
        return data?.connectTmpls
      },
      showTableSetting: false,
      showIndexColumn: false,
      bordered: false,
      striped: false,
      immediate: false,
      columns: columns,
      useSearchForm: false,
    },
  })

  const [registerTable, { reload, setProps }] = tableContext
  const { createMessage } = useMessage()
  const glob = useGlobSetting()

  onMounted(async () => {
    try {
      loading.value = true
      extIdp.value = await extIdpApi.getIdp({ id: idpId })
      if (!extIdp.value) {
        createMessage.error('身份源不存在')
        return
      }
      connectCountList.value = (await extIdpApi.countIdpConnect({ idpId: idpId })) || []
      setProps({ searchInfo: { id: extIdp.value.idpTmplId } })
      await reload()
    } finally {
      loading.value = false
    }
  })

  const handleEdit = (record) => {
    go('/auth/extIdp/editConnect/' + record.id + '/' + record.idpTmplId + `?idpId=${idpId}`)
  }

  const handleDeleteExtIdp = async () => {
    await extIdpApi.deleteIdp({ id: extIdp.value.id })
    window.history.go(-1);
  }


  function getActions(record) {
    return [
      {
        label: "编辑",
        onClick: handleEdit.bind(null, record),
      },
    ]
  }
</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-ext-idp-connect";

  .@{prefix-cls} {

    &-header .info {
      display: flex;
      width: 80%;
    }

    &-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
    }

    &-header-img {
      margin-right: 15px;
    }
  }
</style>
